<script lang="ts" setup>
// 表单数据
import { useLoginStore } from "@/stores/login.ts"
import { useTemplateRef } from "vue"
import type { FormInstance } from "element-plus"
import { useRouteQuery } from "@/hooks/useRouteQuery.ts"

const router = useRouter()
const { login } = useLoginStore()

const loginForm = reactive({
  username: "admin",
  password: "123456",
  remember: false
})

// 表单引用
const loginFormRef = ref()

// 加载状态
const loading = ref(false)

// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "用户名长度在 3 到 20 个字符", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" }
  ]
})

const loginFormInstance = useTemplateRef<FormInstance>("loginFormRef")

const { redirect, otherQuery } = useRouteQuery()
// 登录处理
const handleLogin = () => {
  loginFormInstance.value?.validate().then(async (valid) => {
    if (valid) {
      await login(loginForm)
      // 解析出一个重定向路径 + 查询参数
      router.push({ path: redirect.value || "/", query: otherQuery.value })
    }
  })
}
</script>

<template>
  <div
    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 relative overflow-hidden"
  >
    <!-- 背景装饰元素 -->
    <div class="absolute w-full h-full z-0">
      <div
        class="absolute w-20 h-20 top-10 left-10 rounded-full bg-white/10 animate-float-15"
      ></div>
      <div
        class="absolute w-30 h-30 bottom-15 right-10 rounded-full bg-white/10 animate-float-18 animation-direction-reverse"
      ></div>
      <div
        class="absolute w-15 h-15 top-60 left-20 rounded-full bg-white/10 animate-float-12"
      ></div>
    </div>

    <!-- 登录卡片 -->
    <div class="w-full max-w-md p-8 z-1">
      <div
        class="login-card bg-white/95 rounded-2xl p-12 shadow-lg transition-all-300 hover:translate-y--2 hover:shadow-xl"
      >
        <!-- 标题区域 -->
        <div class="text-center mb-10">
          <h1 class="login-title text-3xl text-gray-800 font-bold mb-2">
            欢迎登录
          </h1>
          <p class="text-base text-gray-500">请输入您的账号和密码</p>
        </div>

        <!-- 登录表单 -->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          class="mt-8"
          @submit.prevent="handleLogin"
        >
          <!-- 用户名输入框 -->
          <div class="mb-7">
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                clearable
                placeholder="请输入用户名"
                size="large"
              />
            </el-form-item>
          </div>

          <!-- 密码输入框 -->
          <div class="mb-7">
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                show-password
                size="large"
                type="password"
              />
            </el-form-item>
          </div>

          <!-- 记住密码和忘记密码 -->
          <div class="flex justify-between items-center mb-6">
            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            <a
              class="text-blue-500 no-underline text-sm transition-colors hover:text-purple-600"
              href="#"
              >忘记密码?</a
            >
          </div>

          <!-- 登录按钮 -->
          <el-button
            :loading="loading"
            class="login-btn w-full h-13 border-none rounded-lg text-lg text-white mt-4 transition-all-300 font-medium hover:translate-y--1 hover:shadow-lg"
            type="primary"
            @click="handleLogin"
          >
            {{ loading ? "登录中..." : "立即登录" }}
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-card {
  backdrop-filter: blur(10px);
}

.login-title {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

.animate-float-15 {
  animation: float 15s infinite ease-in-out;
}

.animate-float-18 {
  animation: float 18s infinite ease-in-out;
}

.animate-float-12 {
  animation: float 12s infinite ease-in-out;
}
</style>
